<template>
  <view class="about_menu">
    <view style="width: 300px">
      <el-radio-group v-model="isCollapse" style="margin-bottom: 20px; margin-top: 20px">
        <el-radio-button :value="false">展开</el-radio-button>
        <el-radio-button :value="true">收缩</el-radio-button>
      </el-radio-group>
      <el-button style="margin-top: 10px; margin-left: 15px" type="primary" @click="openLoginClick">
        登录
      </el-button>
      <el-dialog v-model="dialogFormVisible" title="登录" width="400">
        <el-form :model="form">
          <el-form-item label="账号">
            <el-input v-model="form.name" autocomplete="off" />
          </el-form-item>
          <el-form-item label="密码">
            <el-input v-model="form.region" autocomplete="off" />
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="openLoginCloseClick">Cancel</el-button>
            <el-button type="primary" @click="openLoginSuccessClick"> Confirm </el-button>
          </div>
        </template>
      </el-dialog>

      <el-menu
        default-active="2-1"
        class="el-menu-vertical-demo"
        :collapse="isCollapse"
        @open="handleOpen"
        active-text-color="#ffd04b"
        text-color="#fff"
        background-color="#545c64"
        @close="handleClose"
      >
        <el-sub-menu index="1">
          <template #title>
            <el-icon>
              <location />
            </el-icon>
            <span>测试一 One</span>
          </template>
          <el-menu-item-group>
            <template #title><span>Group One</span></template>
            <el-menu-item index="1-1" @click="haloDemoClick()">halo-gpt5</el-menu-item>
          </el-menu-item-group>
          <el-sub-menu index="1-2">
            <template #title><span>聊天</span></template>
            <el-menu-item index="1-2-1" @click="ChatMqttViewClick()">聊天MQTT</el-menu-item>
            <el-menu-item index="1-2-2" @click="ChatBootViewClick()">聊天自研</el-menu-item>
            <el-menu-item index="1-2-3" @click="ChatViewClick()">聊天范例</el-menu-item>
          </el-sub-menu>
          <el-menu-item-group title="Group Two">
            <el-menu-item index="1-3" @click="dsChatClick()">deepSeekChat</el-menu-item>
          </el-menu-item-group>
          <el-sub-menu index="1-4">
            <template #title><span>vue代码实验</span></template>
            <el-menu-item index="1-4-1" @click="vueTest1Click()">实验一</el-menu-item>
            <el-menu-item index="1-4-2" @click="vueTest2Click()">实验二</el-menu-item>
          </el-sub-menu>
        </el-sub-menu>
        <el-sub-menu index="2">
          <template #title>
            <el-icon><icon-menu /></el-icon> <span>正式实验</span>
          </template>
          <el-menu-item
            v-for="(item, indexFor) in menuItemTwo"
            :key="indexFor"
            :index="item.index"
            @click="subItemClick(indexFor)"
            >{{ item.name }}</el-menu-item
          >
        </el-sub-menu>
        <el-menu-item index="3" disabled>
          <el-icon>
            <document />
          </el-icon>
          <template #title>Navigator Three</template>
        </el-menu-item>
        <el-sub-menu index="4">
          <template #title>
            <el-icon>
              <Folder />
            </el-icon>
            <span>文件上传下载</span>
          </template>
          <el-menu-item index="4-1" @click="fileUpDown()">
            <template #title>
              <el-icon>
                <List />
              </el-icon>
              上传下载</template
            >
          </el-menu-item>
          <el-menu-item index="4-2" @click="fileDsUpDown()">
            <template #title>
              <el-icon>
                <List />
              </el-icon>
              ds生成的上传下载</template
            >
          </el-menu-item>
        </el-sub-menu>
      </el-menu>
    </view>
    <MainContentView />
  </view>
</template>

<script setup lang="ts">
import { ElMessage } from 'element-plus'
import { reactive, ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import MainContentView from '@/components/MainContentView.vue'

import {
  Document,
  Menu as IconMenu,
  Location,
  List,
  Folder,
  Setting,
} from '@element-plus/icons-vue'

const router = useRouter()
const loginSuccess = router.currentRoute.value.query.suc
if (loginSuccess) {
  ElMessage.success('登录成功')
}

const isCollapse = ref(false)
const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const subItemClick = (index: number) => {
  console.log('index', index)
  if (index === 0) {
    router.push('/user')
  } else if (index === 1) {
    router.push('/timeChange')
  } else if (index === 2) {
    router.push('/enDecode')
  } else if (index === 3) {
    router.push('/four')
  } else if (index === 4) {
    router.push('/urlBookMarkView')
  } else if (index === 5) {
    router.push('/chatUser')
  }
}
const fileUpDown = () => {
  router.push('/fileUpDown')
}
const fileDsUpDown = () => {
  router.push('/fileDsUpDown')
}
const haloDemoClick = () => {
  router.push('/haloDemo')
}
const ChatViewClick = () => {
  router.push('/chatView')
}
const ChatMqttViewClick = () => {
  router.push('/chatMqttView')
}
const ChatBootViewClick = () => {
  router.push('/chatBootView')
}
const dsChatClick = () => {
  router.push('/dsSse')
}
const vueTest1Click = () => {
  router.push('/vueTest1')
}
const vueTest2Click = () => {
  router.push('/vueTest2')
}
const dialogFormVisible = ref(false)

const form = reactive({
  name: '',
  region: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',
})

const menuItemTwo = ref([
  {
    name: '用户列表',
    index: '2-1',
  },
  {
    name: '时间转换',
    index: '2-2',
  },
  {
    name: '编码解码',
    index: '2-3',
  },
  {
    name: '爆品榜',
    index: '2-4',
  },
  {
    name: '网页收藏',
    index: '2-5',
  },
  {
    name: '聊天用户',
    index: '2-6',
  },
])

const openLoginClick = () => {
  router.push('/')
  // dialogFormVisible.value = true
}

const openLoginCloseClick = () => {
  dialogFormVisible.value = false
}

const openLoginSuccessClick = () => {
  dialogFormVisible.value = false
}

// 初始化加载文件列表
onMounted(() => {
  subItemClick(0)
})
</script>

<style>
@media (min-width: 1024px) {
  /* .about {
    min-height: 100vh;
    display: flex;
  } */
}

.about_menu {
  display: flex;
  width: 100%;
  height: 100%;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
}

.el-menu-vertical-demo:not(.el-menu) {
  min-height: 800px;
}
</style>
